<script>
import { isEmptyObj } from '@/utils'
import dayjs from 'dayjs'
import { Decimal } from 'decimal.js'

export default {
    name: 'BaseColunm',
    props: {
        // 状态
        status: {
            type: Object,
            default: undefined
        },
        // 保留几位小数， 默认ture是2位
        filterDecimal: {
            type: [Boolean, String, Number],
            default: undefined
        },
        // 空展示
        emptyText: {
            type: String,
            default: ''
        },
        // 枚举对象
        enum: {
            type: Object,
            default: undefined
        },
        // link Colunm
        link: {
            type: [Function, String, Object],
            default: undefined
        },

        // date Colunm
        formatDate: {
            type: String,
            default: undefined
        },

        type: {
            type: String,
            default: 'default'
        },
        label: {
            type: String,
            default: ''
        },
        prop: {
            type: String,
            default: ''
        },
        width: {
            type: [String, Number],
            default: ''
        },
        minWidth: {
            type: [String, Number],
            default: ''
        },
        sortable: {
            type: [Boolean, String],
            default: undefined
        },
        resizable: {
            type: Boolean,
            default: true
        },
        align: {
            type: String,
            default: 'center'
        },
        filterMultiple: {
            type: Boolean,
            default: true
        },
        sortOrders: {
            type: Array,
            default() {
                return ['ascending', 'descending', null]
            },
            validator(val) {
                return val.every(order => ['ascending', 'descending', null].indexOf(order) > -1)
            }
        },
        showTooltipWhenOverflow: Boolean,
        showOverflowTooltip: Boolean,
        reserveSelection: Boolean
    },
    computed: {
        _sortable() {
            if (this.sortable !== undefined) {
                return this.sortable
            }
            // 金额和时间自带排序
            return !!this.filterDecimal || !!this.formatDate
        }
    },
    methods: {
        handleGoLink(scope) {
            const link = typeof this.link === 'function' ? this.link(scope) : this.link
            this.$router.push(link)
        },
        renderLink(scope = {}) {
            const { row } = scope
            return <el-link type='primary' onClick={() => this.handleGoLink(scope)}>{row?.[this.prop]}</el-link>
        },

        renderDate(scope) {
            const { row } = scope
            return (
                <span>
                    {dayjs(parseInt(row?.[this.prop])).format(this.formatDate)}
                </span>
            )
        },

        renderNumber(scope) {
            const { row } = scope
            const num = row?.[this.prop]
            const digit = this.filterDecimal === true ? 2 : this.filterDecimal
            const data = new Decimal(
					new Decimal(num).toFixed(digit, Decimal.ROUND_DOWN)
				).toNumber()

            return <span>{data}</span>
        }
    },
    render(h) {
        return (
            <el-table-column
              prop={this.prop}
              label={this.label}
              width={this.width}
              minWidth={this.minWidth}
              align={this.align}
              sortable={this._sortable}
            >
            {isEmptyObj(this.$slots) ? (scope) => {
                const { row } = scope
                const propContent = row[this.prop]
                const content = this.enum ? this.enum[propContent] : propContent

                // 链接
                if (this.link) {
                    return this.renderLink(scope)
                }

                // 日期
                if (this.formatDate) {
                    return this.renderDate(scope)
                }

                // 金额
                if (this.filterDecimal) {
                    return this.renderNumber(scope)
                }

                if (this.status) {
                    const t = this.status[propContent] || 'info'
                    return <el-tag type={t}>{content}</el-tag>
                }

                return <span> {content || '-'} </span>
            } : this.$slots.default}
            </el-table-column>
        )
    }
}
</script>
